<template>
  <div class="book_manage">
    <header-go-back title="账本管理" text="新增" @back="handleGoBack" @ok="handleNewBook"></header-go-back>
    <div class="books">
      <div class="book_item" v-for="(item, index) in bookData" :key="'book' + index" @click="handleSwitchBook(item)">
        <div class="book_title">
          <i :class="['iconfont', item.icon]"></i>
          {{ item.name }}{{ item.defaultBook ? "(系统账本)" : "" }}
          <i class="iconfont icon-gengduo book_icon" @click.stop="handleEditBook(item)"></i>
        </div>
        <div class="book_content">
          <div class="book_text">总支出：{{ item.pay.toFixed(2) }}</div>
          <div class="book_text">总收入：{{ item.income.toFixed(2) }}</div>
        </div>
        <div class="book_content">
          <div class="book_text">共{{ item.billCount }}条账单</div>
          <div class="book_text">创建于{{ item.createTime }}</div>
        </div>
        <div class="select_book" v-if="book.id === item.id">
          <i class="iconfont icon-pinpaizhuanxiang"></i>
        </div>
      </div>
    </div>
    <van-overlay :show="editVisible" @click="editVisible = false">
      <div class="operate_sheet" @click.stop>
        <span class="operate_sheet_item" v-for="(item, index) in selectBook.defaultBook ? ['编辑'] : editData" :key="'edit' + index" @click="handleEditOperate(item)">{{ item }}</span>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts">
import HeaderGoBack from '@/components/common/HeaderGoBack.vue'
import { getStartAndEnd } from '@/utils/helper'
import dayjs from 'dayjs'
import { computed, defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    HeaderGoBack
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const book = computed(() => store.state.book)
    const bookData = computed(() => store.state.bookList)
    const editVisible = ref(false)
    const editData = ['编辑', '共享', '隐藏']
    const selectBook = ref()
    // 回到首页
    const handleGoBack = () => {
      router.push('/')
    }
    // 新增账本
    const handleNewBook = () => {
      router.push('/newBook')
    }
    // 切换账本
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleSwitchBook = (book: any) => {
      localStorage.setItem('book', JSON.stringify(book))
      store.commit('get_book', book)
      handleGetData()
      alert(`已经切换到${book.name}了哦~`)
    }
    // 切换账本后重新获取数据
    const handleGetData = () => {
      const date = getStartAndEnd(new Date())
      const start = dayjs(date.start).format('YYYY-MM-DD 00:00:00')
      const end = dayjs(date.end).format('YYYY-MM-DD 23:59:59')
      store.dispatch('fetchBillList', {
        end: end,
        start: start,
        type: 'day',
        bookIds: book.value.id
      })
      store.dispatch('fetchBillTotal', {
        end: end,
        start: start,
        type: 'month',
        bookIds: book.value.id
      })
    }
    // 打开编辑账本弹窗
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleEditBook = (book: any) => {
      editVisible.value = true
      selectBook.value = book
    }
    // 编辑账本
    const handleEditOperate = (item: string) => {
      switch (item) {
        case '编辑':
          router.push('/newBook')
          break;
        case '共享':
          break;
        case '隐藏':
          break;
        default:
          break;
      }
    }
    return{
      bookData,
      book,
      editVisible,
      editData,
      selectBook,
      handleGoBack,
      handleNewBook,
      handleSwitchBook,
      handleEditBook,
      handleEditOperate
    }
  }
})
</script>

<style scoped>
  .books {
    margin: 20px;
    font-family: '庞门正道真贵楷体';
  }
  .book_item {
    background-color: #f9c3c233;
    margin-bottom: 20px;
    padding: 20px;
    text-align: left;
    border-radius: 8px;
    position: relative;
  }
  .select_book {
    position: absolute;
    right: 10px;
    bottom: 20px;
    font-size: 30px;
    color: #e36c6a;
  }
  .book_title {
    color: #333;
    position: relative;
    line-height: 28px;
    font-size: 20px;
  }
  .book_title .book_icon {
    position: absolute;
    right: 0;
    font-size: 20px;
  }
  .book_content {
    display: flex;
    color: #D2691E;
    font-size: 16px;
    flex-wrap: wrap;
    line-height: 26px;
  }
  .book_text {
    margin-right: 20px;
  }
  .operate_sheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 20%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin: 0 20%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: #f9c3c233 0px 0px 10px 4px;
  }
  .operate_sheet_item {
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
</style>